<template>
	<!-- <view v-if="imgUrl()" class="storeDetail"  :style="{backgroundImage: 'url(' + imgUrl() + 'storydetail.png' + ')'}">-->
	<view class="storeDetail" v-if="imgUrl()" :style="{ backgroundImage: 'url(' + imgUrl() + 'storydetail1.png' + ')' }">
		<home-story-nav :bgColor="bgColor"></home-story-nav>
		<!-- #ifndef MP-WEIXIN -->
		<view style="height: 88rpx"></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view style="height: 88rpx"></view>
		<!-- #endif -->
		<view class="stort_content">
			<view class="story-user" style="position: relative">
				<view class="story_user">
					<image style="border-radius: 50%; background-color: #eaeaea" :src="story.avatarAbsolute" mode=""></image>
					<text>{{ story.userName }}</text>
				</view>
				<view class="story_share"><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/share.png" mode=""></image></view>
				<button class="wxBtn" open-type="share"></button>
			</view>
			<view class="story-title">
				<view>
					今天是我在倾小瘦的第
					<text>{{ story.days }}</text>
					天
				</view>
				<view>下面就一起看看我的故事吧～</view>
			</view>
			<view class="story-ad"><image v-if="imgUrl()" :src="imgUrl() + 'ad.png'" mode=""></image></view>
			<view class="story_img">
				<view><image :src="story.beforePicAbsolute" mode=""></image></view>
				<view><image :src="story.afterPicAbsolute" mode=""></image></view>
			</view>
			<view class="story-heart_content">
				<view class="story-heart">
					<view class="heart-top">
						我的减肥心得
						<view><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/star.png" mode=""></image></view>
					</view>
					<view class="heart-content">{{ story.weightExperience }}</view>
				</view>
			</view>
			<view class="heart-dialogue">
				<view class="heart-dialogue-user">
					<image style="border-radius: 50%; background-color: #eaeaea" :src="story.avatarAbsolute" mode=""></image>
					<text>{{ story.userName }}</text>
				</view>
				<view class="heart-dialogue-content">我是第{{ story.publisher.storyRanking }}位分享自己故事的倾小瘦用户，希望我的经验分享可以帮助到更多的倾小瘦小伙伴</view>
			</view>
			<view class="curve"><home-arc1 :afterWeight="story.afterWeight" :beforeWeight="story.beforeWeight"></home-arc1></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			index: '',
			story: {},
			bgColor: ""
		};
	},
	onPageScroll(e) {
		if (e.scrollTop > 30) {
			this.bgColor = 'white';
		} else {
			this.bgColor = null;
		}
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		requestStory() {
			this.request.httpTokenRequest(`/mp-api/wx/story/details/${this.id}`, null, 'POST', false).then(res => {
				if (res.code == 0) {
					this.story = res.data;
				}
			});
		},
		gapDay() {
			// if (this.story.publisher) {
			if (this.story.endTime) {
				var end = Date.parse(new Date(this.story.startTime.replace(/\-/g, '/')));
				var now = Date.parse(new Date(this.story.endTime.replace(/\-/g, '/')));
				var msec = now - end;
				if (msec < 0) return;
				let days = Math.ceil(msec / (24 * 3600 * 1000)) + 1;
				return days;
			}
			return '1';
			// }
		},
		imgUrl() {
			return this.request.appImageBaseUrl;
		}
	},
	onLoad: function(option) {
		if (option.id) {
			this.id = option.id;
			this.index = option.index;
		}
		this.requestStory();
	}
};
</script>

<style lang="scss" scoped>
body,
.story {
	height: 100%;
	min-height: 100vh;
	background-position: center;
	background-color: #e0ede9;
	position: relative;
}

uni-page-body,
html {
	height: 100%;
	background-color: #e0ede9;
}

.status_bar {
	height: 20px;
	width: 100%;
}

.search_nav_content {
	position: fixed;
	width: 100%;
	z-index: 998;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.search_title {
	width: 180rpx;
	left: calc(50% - 90rpx);
	position: absolute;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	color: #000000;
	font-size: 32rpx;
	font-weight: 500;
}

.search_placeholder_view {
	height: 290rpx;
}

.stort_content {
	position: absolute;
	top: 10%;
	width: 100%;
	left: 0;
	height: 100%;
}

.story-heart_content {
	width: 92%;
	margin: 0 auto;
	height: 404rpx;
	border-radius: 20rpx;
	background-color: #c4e3dc;
	position: relative;
}

.wxBtn {
	background-color: transparent;
	width: 100%;
	height: 100%;
	flex: 1;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 200;
}

.story_user text {
	word-break: break-all;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	word-wrap: break-word;
	width: calc(100% - 100rpx);
}

button::after {
	border: none;
}
</style>
